<template>
	<uni-popup ref="prope" type="center">
		<view class="exchange-wrap flex-a-c flex-j-a flex-column">
			<view class="guanbi" @tap="guanbi">
				<image src="https://mh.qingfentool.vip/upload/image/20230225/27ebac2afdeca6500fc8fa9de3aa9600.png" mode="">
				</image>
			</view>
			<view class="top_img_box">
				<image src="https://mh.qingfentool.vip/upload/image/20230529/0e3bf75eb5f302a2e1c95feebd1114aa.png" mode="">
				</image>
				<view class="zongliu_box">
					<view class="num_box">
						<image src="https://mh.qingfentool.vip/upload/image/20230523/093cf5dd12cd151bc4b3b93f74cf956e.png"
							mode=""></image>
						<view class="txt_box">
							当前充值总额：{{ parpinobj }}
						</view>
					</view>
				</view>
			</view>

			<scroll-view class="bot_box" :scroll-y="true" :show-scrollbar="false" enhanced>
				<view class="one_box" v-for="(item, index) in parjiangList" :key="item.id">
					<view class="left_box">
						<view class="image_box">
							<image
								src="https://mh.qingfentool.vip/upload/image/20230523/2d667025a818fdde64a5405fbeaa8a7a.png"
								mode=""></image>
						</view>
					</view>
					<view class="middle_box">
						{{ item.once_integral }}大王币福袋
					</view>

					<view class="right_box" v-if="parpinobj < parseInt(item.standard)">
						<view>{{ parpinobj }}/{{ parseInt(item.standard) }}</view>
						<view class="left1_box">
							<view class="container">
								<!-- 第二层进度条的颜色 -->
								<view class="strip">
									<view class="blue" :style="'width:' + parpinobj / item.standard * 100 + '%'"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="right1_box" v-else
						:style="{ 'background': (item.btn_status == '1' ? '#395990' : '#5191FF') }">
						<view @tap="lqBtn(item.id)" v-if="item.btn_status == '0'">{{ item.progress_bar }}</view>
						<view @tap="yjBtn(item.id)" v-if="item.btn_status == '1'">{{ item.progress_bar }}</view>
					</view>
				</view>
				<view style="height:160rpx;"></view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script>
import { handleError } from "vue";
export default {
	props: ["parjiangList", "parpinobj",],
	data() {
		return {
			code: "",
			// 等级进度
			info: {
				progress: 0,
			},
		};
	},

	methods: {
		open() {
			this.$refs.prope.open()
		},
		guanbi() {
			this.$refs.prope.close()
		},
		// 领取按钮
		lqBtn(jpId) {
			let data = {
				id: jpId
			}
			this.$Request.post(this.$api.jiangpin.vipOnceReward, data).then(res => {
				this.qiandao()
				////console.log(res)
				uni.showToast({
					title: res.msg,
					icon: 'none',
				})
			})
			this.$parent.userList()
		},
		qiandao() {
			this.$Request.post(this.$api.jiangpin.getUserReward).then(res => {
				////console.log(res)
				this.parjiangList = res.data.reward
			})
		},
		yjBtn() {
			uni.showToast({
				title: '已领取过',
				icon: 'none',
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.exchange-wrap {
	width: 750rpx;
	height: 49vh;
	border-radius: 20rpx;
	position: relative;
	background-color: #FBF6DE;

	.guanbi {
		width: 44rpx;
		height: 44rpx;
		top: -44rpx;
		right: 28rpx;
		position: absolute;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top_img_box {

		width: 100%;
		height: 348rpx;
		position: absolute;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}

		.zongliu_box {
			width: 100%;
			height: 150rpx;
			position: absolute;
			bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// background-color: #fff;

			.num_box {
				width: 398rpx;
				height: 124rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.txt_box {
					left: 0;
					right: 0;
					top: 0;
					line-height: 200rpx;
					text-align: center;
					bottom: 0;
					font-size: 22rpx;
					margin: auto;
					color: #fff;
					position: absolute;
				}
			}
		}
	}



	.bot_box {
		width: 100%;
		background-color: #FBF6DE;
		height: 900rpx;
		position: absolute;
		top: 340rpx;
		overflow: hidden;
		overflow-y: auto;

		.one_box {
			width: 706rpx;
			height: 202rpx;
			background: rgba(105, 250, 255, 0.1);
			opacity: 1;
			margin: auto;
			margin-top: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #F2E7C8;

			.left_box {
				width: 170rpx;
				height: 170rpx;
				margin-left: 18rpx;
				background-color: #77A0CB;
				position: relative;

				.image_box {
					width: 81rpx;
					height: 81rpx;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}

			.middle_box {
				width: 172rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #DF7633;
			}

			.right_box {
				position: relative;
				width: 232rpx;
				height: 60rpx;
				background: rgba(74, 227, 255, 0.44);
				border-radius: 20rpx;
				opacity: 1;
				margin-right: 26rpx;
				color: white;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;

				.left1_box {
					position: absolute;
					width: 100%;
					height: 60rpx;
					// padding-left: 20rpx;
					top: 0;
					left: 0;

					.strip {
						position: relative;
						width: 100%;
						height: 60rpx;
						// color: rgba(80, 80, 80, 1);
						// background-color: #FFFFFF;
						font-size: 28rpx;
						// line-height: 150%;
						text-align: center;
						// margin-bottom: 12upx;
						border-radius: 20upx;

						overflow: hidden;
					}

					.blue {
						height: 60rpx;
						background-color: #5191FF;
						// border-radius: 20rpx;
						opacity: .6;
					}
				}
			}

			.right1_box {
				width: 210rpx;
				height: 60rpx;
				background: #5191FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				margin-right: 26rpx;
				color: white;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}
}
</style>
